<template>
  <div v-if="!articleList.length" class="empty-state">
    <img src="@/assets/icons/svg/空状态.svg" alt="空状态插图">
    <p>暂时还没有内容，先做个深呼吸吧~</p>
  </div>
  <div class="articles-container">
    <article
        class="article-card"
        v-for="article in articleList"
        :key="article.articleId"
        @click="goToDetail(article.articleId)"
    >
      <div class="card-cover">
        <image-preview :src="article.coverImage"/>
      </div>
      <div class="card-body">
        <h3 class="article-title">{{ article.title }}</h3>
        <p class="article-desc">{{ article.description }}</p>
        <div class="meta-container">
          <div class="stats-box">
            <span class="stat-item">👁️ {{ article.viewCount || 0 }}</span>
            <span class="stat-item">❤️ {{ article.likeCount || 0 }}</span>
            <span class="stat-item">⭐ {{ article.collectCount || 0 }}</span>
          </div>
          <span class="publish-time">{{ article.publishTime }}</span>
        </div>
      </div>
    </article>
  </div>
</template>

<script setup>
import {getArticleList} from "@/api/articles/articles.js";
import {getCurrentInstance, ref} from "vue";

const {proxy} = getCurrentInstance();

const articleList = ref([]);

// 跳转详情
function goToDetail(articleId) {
  console.log("跳转id", articleId)
  proxy.$router.push({
    path: '/articleDetail',
    query: {  // 使用 query 传参
      articleId: articleId,
    }
  })
}


function loadArticles() {
  getArticleList().then(res => {
    articleList.value = res.rows;
  })
}

onMounted(() => {
  loadArticles();
})
</script>

<style scoped lang="scss">
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;

  img {
    max-width: min(200px, 50vw);
    margin-bottom: 20px;
    filter: grayscale(30%);
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.05);
    }
  }

  p {
    font-size: clamp(14px, 2vw, 16px);
    color: #8AA2A9;
    text-align: center;
    max-width: 80%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.articles-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 30px;
}

.article-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(138, 162, 169, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  min-height: 220px;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(138, 162, 169, 0.15);

    .cover-image {
      transform: scale(1.05);
    }
  }

  &:active {
    transform: scale(0.98);
  }
}

.card-cover {
  flex: 0 0 200px;
  height: 220px;
  overflow: hidden;
  position: relative;

  .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
}

.card-body {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.article-title {
  font-size: 18px;
  font-weight: 600;
  color: #4A4A4A;
  margin-bottom: 12px;
  font-family: 'Noto Serif SC', serif;
}

.article-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.meta-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.stats-box {
  display: flex;
  gap: 15px;

  .stat-item {
    font-size: 13px;
    color: #8AA2A9;
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.publish-time {
  font-size: 12px;
  color: #999;
}
</style>
